<template>
  <div style="padding:20px 250px">
    <div id="radar"></div>
  </div>
</template>

<script>
import DataSet from "@antv/data-set";
import { Chart } from "@antv/g2";
export default {
  components: {},
  data() {
    return {};
  },
  methods: {
    initChart() {
      const data = [
        { item: "服务态度", a: 70},
        { item: "响应速度", a: 60 },
        { item: "处理结果", a: 50},
      ];
      const { DataView } = DataSet;
      const dv = new DataView().source(data);
      dv.transform({
        type: "fold",
        fields: ["a"], // 展开字段集
        key: "user", // key字段
        value: "score", // value字段
      });

      const chart = new Chart({
        container: "radar",
        autoFit: true,
        height: 500,
      });
      chart.data(dv.rows);
      chart.scale("score", {
        min: 0,
        max: 80,
      });
      chart.coordinate("polar", {
        radius: 0.8,
      });
      chart.tooltip({
        shared: true,
        showCrosshairs: true,
        crosshairs: {
          line: {
            style: {
              lineDash: [4, 4],
              stroke: "#333",
            },
          },
        },
      });
      chart.axis("item", {
        line: null,
        tickLine: null,
        grid: {
          line: {
            style: {
              lineDash: null,
            },
          },
        },
      });
      chart.axis("score", {
        line: null,
        tickLine: null,
        grid: {
          line: {
            type: "line",
            style: {
              lineDash: null,
            },
          },
        },
      });

      chart
        .line()
        .position("item*score")
        .color("user")
        .size(2);
      chart
        .point()
        .position("item*score")
        .color("user")
        .shape("circle")
        .size(4)
        .style({
          stroke: "#fff",
          lineWidth: 1,
          fillOpacity: 1,
        });
      chart
        .area()
        .position("item*score")
        .color("user");
      chart.render();
    },
  },
  mounted() {
    this.initChart();
  },
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
